<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <el-header style="height:45px;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;">
        <el-date-picker
                v-model="dateVal"
                type="date"
                size="small"
                @change="evtChangeDate"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
        </el-date-picker>

        <div>
          <ToolButton :disabled="button.disabled" :icon="button.icon" :key="button.text" :left-line="button.leftLine" :right-line="button.rightLine" :text="button.text" :title="button.title" @buttonClick="toolButtonClick" v-for="button in toolButtons" style="margin-top:0;margin-right: 10px;" />
        </div>

      </el-header>
      <el-main style="height: 100%;">
        <div style="text-align: center;line-height: 60px;font-size: 20px;">
          <span style="margin-right: 50px">{{showDate}} </span> 楼宇安全数据报表
        </div>
        <div class="content" style="height:calc(100% - 60px);">
          <el-table :data="tableData" height="100%" style="width: 100%;" border v-loading="loadIng" :default-sort="{prop: 'passTime', order: 'descending'}" @sort-change="changeTableSort">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="name" label="楼宇名称"></el-table-column>
            <el-table-column prop="lateIn" label="晚归人数" width="140" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('lateIn',scope.row)">{{scope.row.lateIn}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lateOut" label="晚出人数" width="140" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('lateOut',scope.row)">{{scope.row.lateOut}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="notBack" label="未归人数" width="140" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('notBack',scope.row)">{{scope.row.notBack}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="preOut" label="未出预警人数"width="160" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('preOut',scope.row)">{{scope.row.preOut}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="preIn" label="未归预警人数" width="160px" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('preIn',scope.row)">{{scope.row.preIn}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
    <!--导出-->
    <export-excel ref="exportExcel" :sheet-name="sheetName" :file-name="exportFileName"  extend="export" :columns="columns" :rows="totalRows" :query="searchObj" :export-api="exportApi" :isPerSon="false"/>
    <build-detail  ref="buildDetail"></build-detail>
  </div>
</template>
<script>
  import { apiLateRecord } from "@/api/basicData/lateRecord";
  import  ToolButton from "@/itsoftUI/components/toolbar/toolbutton";
  import  exportExcel from "@/itsoftUI/components/exportExcel/safetyExportExcel";
  import { getPremission } from "@/itsoftUI/auth/permission";
  import  {ItSoftDateUtil} from "@/itsoftUI/utils/ItSoftDateUtil"
  import buildDetail from  "./buildDetail"
  export default {
    components: {ToolButton,exportExcel,buildDetail},
    data() {
      return {
        loading: false,
        dateVal:ItSoftDateUtil.dateFormat(new Date(),"yyyy-MM-dd"),
        showDate:ItSoftDateUtil.dateFormat(new Date(),"yyyy年MM月dd日"),
        toolButtons: [{
          text: "导出",
          auth: "070201",
          icon: "daochu",
        }],
        exportFileName: "楼宇安全报表",
        sheetName: "楼宇安全报表",
        exportApi: apiLateRecord.countSafety,
        searchObj:{},
        totalRows:2,
        columns: [{
          prop: "name",
          label: "楼宇名称",
        },{
          prop: "lateIn",
          label: "晚归人数",
        },{
          prop: "lateOut",
          label: "晚出人数",
        },{
          prop: "notBack",
          label: "未归人数",
        },{
          prop: "preOut",
          label: "未出预警人数",
        },{
          prop: "preIn",
          label: "未归预警人数",
        }
        ],
        tableData: [],

      };
    },
    methods: {
      toolButtonClick(val){
        switch (val) {
          case "导出":
            this.$refs.exportExcel.exportOpen();
            break;
        }
      },
      evtChangeDate(){
        this.showDate = ItSoftDateUtil.dateFormat(new Date(this.dateVal),"yyyy年MM月dd日");
        this.getDataList();
      },
      funGetRowDetail(val,row){
        this.$refs.buildDetail.dialogVisible  =true;
        this.$refs.buildDetail.moduleName = val;
        this.$refs.buildDetail.manageBuildingId = row.id;
        this.$refs.buildDetail.dateVal = this.dateVal;
        this.$refs.buildDetail.funGetTabData();
      },
      getDataList(){
        this.loading = true;
        this.searchObj = {
          times:this.dateVal,
          type:"build"
        };
        this.sheetName = this.showDate+"   楼宇安全报表";
        this.exportFileName = this.showDate+"   楼宇安全报表";
        apiLateRecord.countSafety(this.dateVal,"build").then(res=>{
          if(res.errorCode == 0){
            this.tableData = res.data;
          }
          this.loading = false
        }).catch(()=>{
          this.loading = false;
        })
      }

    },
    created() {
      getPremission(this.toolButtons);
      this.getDataList();
    },
  };
</script>
<style scoped>
  .colTitle {
    display: inline-block;
    line-height: 34px;
    margin-right: 10px;
  }
</style>